<!-- table合并单元格 -->
<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    border
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="stage" label="阶段" width="180" />
    <el-table-column prop="task" label="父任务" />
    <el-table-column prop="status" label="任务状态" />
    <el-table-column prop="startTime" label="开始时间" />
    <el-table-column prop="endTime" label="结束时间" />
    <el-table-column prop="operate" fixed="right" label="操作" width="120">
      <template #default>
        <el-button link type="primary" size="small">详情</el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const tableData: any[] = [
  {
    id: 1,
    stage: '阶段一',
    task: 'tom',
    status: '234',
    startTime: '3.2',
    endTime: '3.2'
  },
  {
    id: 2,
    stage: '阶段一',
    task: 'jac',
    status: '165',
    startTime: '4.43',
    endTime: '3.2'
  },
  {
    id: 3,
    stage: '阶段一',
    task: 'jac1',
    status: '165',
    startTime: '4.43',
    endTime: '3.2'
  },
  {
    id: 4,
    stage: '阶段二',
    task: 'alice',
    status: '324',
    startTime: '1.9',
    endTime: '3.2'
  },
  {
    id: 5,
    stage: '阶段二',
    task: 'keven',
    status: '621',
    startTime: '2.2',
    endTime: '3.2'
  },
  {
    id: 6,
    stage: '阶段三',
    task: 'jerry',
    status: '539',
    startTime: '4.1',
    endTime: '3.2'
  }
]
// 合并单元格，合并stage相同的列
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  if (column.property === 'stage') {
    if (rowIndex === 0 || row.stage != tableData[rowIndex - 1].stage) {
      let rowspan = 0
      tableData.forEach(item => {
        if (item.stage === row.stage) {
          rowspan++
        }
      })
      return [rowspan, 1]
    } else {
      return [0, 0]
    }
  }
}
</script>

<style scoped></style>
